<template>
    <view class="record_wrap">
        <view class="search_wrap">
            <u--input
                placeholder="请输入搜索激活码查询"
                prefixIcon="search"
                prefixIconStyle="font-size: 13px;color: #AFAFAF"
                placeholder-style="font-size: 28rpx;color: #AFAFAF;"
                border="none"
                style="height: 72rpx;background: #EFEFEF;border-radius: 50rpx;padding: 0 32rpx;"
            ></u--input>
        </view>
        <view class="record_list">
            <view class="record_item">
                <view class="item_top">
                    <view class="order_id">订单编号：V2024054116748343455</view>
                    <view class="order_status">待支付</view>
                </view>
                <view class="item_name">建设工程造价管理基础知识</view>
                <view class="item_activation">
                    <view class="code_icon">
                        <u-icon name="order" color="#64707D" size="14"></u-icon>
                    </view>
                    <view class="code_list">
                        <view class="code_item">1.激活码：2234888，</view>
                        <view class="code_item">2.激活码：2234888，</view>
                        <view class="code_item">3.激活码：2234888，</view>
                        <view class="code_item">4.激活码：2234888，</view>
                        <view class="code_more">更多</view>
                    </view>
                </view>
                <view class="price_detail">
                    <view class="price_left">
                        <view class="actual">实付金额</view>
                        <view class="money">￥<text>240</text>.00</view>
                    </view>
                    <view class="copy_code">复制激活码</view>
                </view>
                <view class="record_time">2024.05.14 17:34:23</view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                search: ''
            }
        },
        methods: {
            
        }
    }
</script>
<style lang="scss" scoped>
    .record_wrap {
        width: 100%;
    }
    .search_wrap {
        width: 100%;
        height: 142rpx;
        background: #fff;
        padding: 30rpx 36rpx;
        box-sizing: border-box;
    }
    .record_list {
        width: 100%;
        height: calc(100vh - 142rpx);
        padding: 32rpx 22rpx 32rpx 34rpx;
        box-sizing: border-box;
        background: #ECECEC;
        .record_item {
            /* height: 418rpx; */
            background: #FFFFFF;
            box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.05);
            border-radius: 12rpx;
            padding: 28rpx 20rpx 28rpx 22rpx;
            margin-bottom: 24rpx;
            .item_top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .order_id {
                    font-family: PingFang SC;
                    font-size: 24rpx;
                    color: #64707D;
                }
                .order_status {
                    font-family: PingFang SC;
                    font-size: 24rpx;
                    color: #1552FB;
                }
            }
            .item_name {
                margin-top: 30rpx;
                height: 40rpx;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #000000;
                line-height: 40rpx;
            }
            .item_activation {
                display: flex;
                margin-top: 24rpx;
                .code_list {
                    //width: 570rpx;
                    height: 92rpx;
                    margin-left: 10rpx;
                    display: flex;
                    flex-wrap: wrap;
                    position: relative;
                    .code_item {
                        width: 284rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 28rpx;
                        color: #64707D;
                        line-height: 40rpx;
                        flex-shrink: 0;
                        &:nth-child(1),&:nth-child(2) {
                            margin-bottom: 12rpx;
                        }
                    }
                }
                .code_more {
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 24rpx;
                    color: #1552FB;
                    line-height: 40rpx;
                    position: absolute;
                    right: 14rpx;
                    bottom: 0rpx;
                }
            }
            .price_detail {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 66rpx;
                margin-top: 24rpx;
                .price_left {
                    display: flex;
                    .actual {
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 28rpx;
                        color: #000000; 
                        margin-top: 18rpx;
                    }
                    .money {
                        font-family: PingFang SC;
                        font-weight: 800;
                        font-size: 28rpx;
                        color: #FF0000;
                        margin-left: 12rpx;
                        text {
                            font-size: 48rpx;
                        }
                    }
                }
                .copy_code {
                    width: 182rpx;
                    height: 54rpx;
                    background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
                    border-radius: 8rpx;font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 24rpx;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 54rpx;
                }
            }
            .record_time {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 24rpx;
                color: #64707D;
                margin-top: 20rpx;
            }
        }
    }
</style>